<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>${category.name}</title>
    <meta name="decorator" content="cms_default_${site.theme}"/>
    <meta name="description" content="${category.description}" />
    <meta name="keywords" content="${category.keywords}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.2/css/swiper.css">
    <style>

        .container{
            width:100%;
        }

        /*面包屑导航*/
        .bread{
            width:100%;
            height:45px;
            text-indent:20px;
        }
        .bread .row{
            width:100%;
            height:100%;
        }
        .span6{
            width:100%;
            height:100%;
        }
        .span6 .breadcrumb{
            width:100%;
            height:100%;
            padding:0;
            margin:0;
        }
        .span6 .breadcrumb li{
            height:100%;
            line-height:45px;
            /*text-align: center;*/
        }

        .span6 .breadcrumb li a:hover{
            color:#888;
            text-decoration: none;
        }

        /*轮播图*/
        .swiper-container{
            width:100%;
            height:600px;
        }
        .swiper-container .swiper-button-next{
            background: none;
            font-size: 100px;
            font-weight:600;
            color: #fff;
            padding-right:130px;
        }
        .swiper-container .swiper-button-prev{
            background: none;
            font-size: 100px;
            font-weight: 600;
            color: #fff;
            padding-left:100px;
        }


        /*优惠购物*/
        .shopping{
            width:100%;
            height:653px;
        }
        .shopping .row{
            width:1200px;
            height:100%;
            position:relative;
            margin:0 auto;
        }
        .shopping .row .title{
            position:relative;
        }
        .shopping .row .title .outter{
            position:absolute;
            left:-17px;
            top:160px;
        }
        .shopping .row .title .inner{
            position:absolute;
            left:-36px;
            top:137px;
        }
        .shopping .row .title .item1{
            text-align:left;
            width:30px;
            line-height:30px;
            color:#fff;
            position:absolute;
            left:90px;
            top:295px;
            font-size:30px;
        }
        .shopping .row .title .english{
            display: block;
            position:absolute;
            left:25px;
            top:222px;
            writing-mode:vertical-rl;
            height:200px;
            font-size:14px;
        }
        .shopping .row .bgImg{
            width:660px;
            height:400px;
            position:absolute;
            left:67px;
            top:105px;
            z-index:-1;
        }
        .shopping .row .article{
            position:absolute;
            width:534px;
            height:306px;
            left:662px;
            top:156px;
            font-size:16px;
            word-wrap:break-word;
        }


        /*返佣系统*/
        .commission{
            width:100%;
            height:653px;
        }
        .commission .row{
            width:1200px;
            height:100%;
            position:relative;
            margin:0 auto;
        }
        .commission .row .title{
            position:relative;
        }
        .commission .row .title .outter{
            position:absolute;
            left:-17px;
            top:160px;
        }
        .commission .row .title .inner{
            position:absolute;
            left:-36px;
            top:137px;
        }
        .commission .row .title .item1{
            text-align:left;
            width:30px;
            line-height:30px;
            color:#fff;
            position:absolute;
            left:90px;
            top:295px;
            font-size:30px;
        }
        .commission .row .title .english{
            display: block;
            position:absolute;
            left:25px;
            top:222px;
            writing-mode:vertical-rl;
            height:200px;
            font-size:14px;
        }
        .commission .row .bgImg{
            width:660px;
            height:400px;
            position:absolute;
            left:67px;
            top:105px;
            z-index:-1;
        }
        .commission .row .article{
            position:absolute;
            width:534px;
            height:306px;
            left:662px;
            top:156px;
            font-size:16px;
            word-wrap:break-word;
        }


    </style>
</head>
<body>

<%--面包屑导航--%>
<div class="bread">
    <div class="row">
        <div class="span6">
            <ul class="breadcrumb">
                <li>
                    <a href="#">关于乐农</a> <span class="divider">></span>
                </li>
                <li class="active">乐农优选购</li>
            </ul>
        </div>
    </div>
</div>


<%--轮播图--%>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgq5eVyQUo2Kih0QYwgA842AQ.jpg"/>
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://13869797.s61i.faiusr.com/2/AD0I5cXOBhACGAAgpJeVyQUo9PbajQMwgA842AQ.jpg"/>
            </a>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev">&lt;</div>
    <div class="swiper-button-next">&gt;</div>

    <!-- 如果需要滚动条 -->
    <%--<div class="swiper-scrollbar"></div>--%>
</div>

<c:forEach items="${categoryList}" var="category">
    <c:if test="${category.module=='article'}" >
        <div class="shopping">
            <div class="row">
                <div class="title">
                    <img src="http://13869797.s61i.faiusr.com/4/AD0I5cXOBhAEGAAgxZqVyQUoyI7JuQMwvgE4ogI.png" class="outter"/>
                    <img src="http://13869797.s61i.faiusr.com/4/AD0I5cXOBhAEGAAg1JyVyQUomIC3ETCWAThk.png" class="inner"/>
                    <span class="item1">${category.name}</span>
                    <span class="english">LENONG</span>
                </div>
                <div class="span6 pull-left bgImg">
                    <img src="http://13869797.s61i.faiusr.com/4/AD0I5cXOBhAEGAAgiZyVyQUo-s2ILjCUBTiQAw.png"/>
                </div>
                <div class="pull-right article">
                    <p>${category.description}</p>
                </div>
            </div>
        </div>
    </c:if>
</c:forEach>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.2/js/swiper.js"></script>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        autoplay: 5000,
        direction: 'horizontal',
        loop: true,
        autoplayDisableOnInteraction: false,
        speed: 3000,
        // 如果需要分页器
//        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev'

        // 如果需要滚动条
//        scrollbar: '.swiper-scrollbar',
    })
</script>
</body>
</html>
